<template>
  <yd-layout>
    <router-view></router-view>
    <yd-tabbar slot="tabbar" active-color = "#f67">
      <yd-tabbar-item title="商城" link= "/" :active = "path === '/'">
        <yd-icon name="home" slot="icon" size="0.44rem" v-show = "path === '/'"></yd-icon>
        <yd-icon name="home-outline" slot="icon" size="0.44rem" v-show = "path !== '/'"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="分类" link="/classification" :active = "path === '/classification'">
        <yd-icon name="ucenter" slot="icon" size="0.44rem" v-show = "path === '/classification'"></yd-icon>
        <yd-icon name="ucenter-outline" slot="icon" size="0.44rem" v-show = "path !== '/classification'"></yd-icon>
      </yd-tabbar-item>
      <yd-tabbar-item title="购物车" link="/cart" :active = "path === '/cart'">
        <yd-icon name="shopcart" slot="icon" size="0.44rem" v-show = "path === '/cart'"></yd-icon>
        <yd-icon name="shopcart-outline" slot="icon" size="0.44rem" v-show = "path !== '/cart'"></yd-icon>
      </yd-tabbar-item>
    </yd-tabbar>
  </yd-layout>
</template>
<script>
export default {
  name: 'index',
  computed: {
    path () {
      return this.$route.path
    }
  }
}
</script>
<style lang="scss" scoped>
  .page{
    height: 100%;
    .wrap{
      overflow-y: auto;
    }
  }
</style>
